<template>
  <div >
    <section ion class="container-main-header">
		<section class="header-left disFlex">
			<i class="el-icon-menu"></i>
			<span>首页</span>/
			<span>商品</span>/
			<span>添加商品分类</span>
			<i class="el-icon-pear"></i>
		</section>
    </section>
    <section class="main">
		<el-form ref="form" :model="ruleForm" :rules="rules" label-width="150px">
			<el-form-item label="分类名称:" prop="name">
				<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			<el-form-item label="上级分类:">
				<el-select v-model="ruleForm.region" placeholder="无上级分类">
				<el-option label="服装" value="clothes"></el-option>
				<el-option label="手机数码" value="mobileDigital"></el-option>
				<el-option label="家用电器" value="homeAppliances"></el-option>
				<el-option label="家具家装" value="furnitureDecoration"></el-option>
				<el-option label="汽车用品" value="carAccessories"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="数量单位:">
				<el-input v-model="ruleForm.productUnit"></el-input>
			</el-form-item>
			<el-form-item label="排序:">
				<el-input v-model="ruleForm.sort"></el-input>
			</el-form-item>
			<el-form-item label="是否显示：">
				<el-radio-group v-model="ruleForm.showStatus">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否显示在导航栏：">
			<el-radio-group v-model="ruleForm.navStatus">
				<el-radio :label="1">是</el-radio>
				<el-radio :label="0">否</el-radio>
			</el-radio-group>
			</el-form-item>
			<el-form-item label="分类图标：">
				<el-upload
					class="upload-demo"
					action="https://jsonplaceholder.typicode.com/posts/"
					:on-preview="handlePreview"
					:on-remove="handleRemove"
					:file-list="fileList"
					list-type="picture">
					<el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
			<!-- 筛选属性 -->
			<el-form-item label="筛选属性:" >
				<div v-for="(item, index) in attrList" :key="index">
					<el-cascader
						clearable
						v-model="item.value"
						:options="filterAttrs">
					</el-cascader>
					<el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(index)">删除</el-button>
				</div>
				
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
			</el-form-item>
			<el-form-item label="关键词：">
				<el-input v-model="ruleForm.keywords"></el-input>
			</el-form-item>
			<el-form-item label="分类描述：">
				<el-input type="textarea" :autosize="true" v-model="ruleForm.description" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
			</el-form-item>
		</el-form>
	</section>
  </div>
</template>
<script>
  	export default {
		data() {
			return {
				ruleForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					description: ''
				},
				rules: {
					name: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
				},
				fileList: [],
				attrList: [{
					value: ''
				}],
				isEdit: false,
				filterAttrs: [],
				productCate: {
					
				},
				filterProductAttrList: [{
					value: []
				}]
			} 
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			filterProductAttr(){

			},
			removeFilterAttr(index){
				this.attrList.splice(index, 1)
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleAddFilterAttr(){
				let obj = {
					value: ''
				}
				this.attrList.push(obj)
			} ,
			onSubmit(){

			},
			resetForm(){

			}
		},
		// filters: {
		// 	filterLabelFilter(index) {
		// 		if (index === 0) {
		// 		return '筛选属性：';
		// 		} else {
		// 		return '';
		// 		}
		// 	}
		// }
	}
</script>

<style scoped>
.container-main-header .el-icon-pear{
  float: right;
  line-height: 50px;
  margin-right: 20px;
}
.container-main-header {
  text-align: left;
  /* padding: 0 20px; */
  width: 100%;
  display: flex;
  flex-direction: column;
}
.header-left {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.header-left span{
  margin: 5px;
  font-size: 14px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
.el-input {
  width: 538px;
  height: 40px;
}
.el-textarea{
	width: 538px;
}
.main{
  width: 800px;
  height: 884px;
  border: 1px solid #cccccc;
  margin: 20px auto;
  padding: 40px;
}
</style>
